<template>
  <div
    style="display: flex; justify-content: space-between; position: relative"
  >
    <div>
      <!-- 分页 -->
      <el-button-group>
        <el-button style="width: 10px" @click="store.pre_page(1)">
          <el-icon><DArrowLeft /></el-icon>
        </el-button>
        <el-button style="width: 10px" @click="store.pre_page(-1)">
          <el-icon><ArrowLeft /></el-icon>
        </el-button>
        <el-button @click="show3 ? show3 = false: show3 = true">
          第{{ store.currentPage }}页/共{{ store.pageNum}}页
          <el-icon><CaretBottom /></el-icon>
        </el-button>
        <el-button style="width: 10px" @click="store.next_page(1)">
          <el-icon><ArrowRight /></el-icon>
        </el-button>
        <el-button
          style="width: 10px"
          @click="store.next_page(-1)"
        >
          <el-icon><DArrowRight /></el-icon>
        </el-button>
      </el-button-group>
      &nbsp;
      <el-button @click="store.loading(true)">
        <el-icon color="#000" size="20"><Refresh /></el-icon>
      </el-button>
    </div>
    <div>
      共记录{{ store.length}}条&nbsp;每页
      <input
        ref="myInput"
        :value="store.pageSize"
        :onblur="pagesum"
        type="number"
        style="
          width: 35px;
          text-align: center;
          height: 22px;
          border: 1px #dddddd solid;
          margin: 0px 2px;
          font-size: 12px;
        "
      />
      条
    </div>
    <div v-show="show3" class="pagelist">
      <p
        v-for="i in store.pageNum"
        :key="i"
        :class="i == store.currentPage ? 'active' : ''"
        @click="gopage(i)"
      >
        第{{ i }}页
      </p>
    </div>
  </div>
</template>
    
<script setup>
import { DArrowLeft, ArrowLeft, ArrowRight, DArrowRight, CaretBottom, Refresh } from "@element-plus/icons-vue";
import {ref, computed} from "vue"
import { useTaskStore } from "../store";
let store=useTaskStore()

const show3 = ref(false);
const myInput = ref(null);
// 分页
const pagesum = (e) => {
  console.log(e.target.value);
  store.pageSize=e.target.value
  // show3.value = false;
};
const gopage = (i) => {
  show3.value = false;
  store.currentPage=i
};

</script>
    
<style scoped>
.pagelist {
  width: 153px;
  position: absolute;
  top: 32px;
  left: 62px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.pagelist p {
  width: 100%;
  height: 36.8px;
  line-height: 40px;
  border-bottom: 1px solid #eae9e9;
  box-sizing: border-box;
  padding-left: 15px;
}

.pagelist p:hover {
  background-color: #f2f0f0;
}
.active {
  background-color: #f2f0f0;
}
</style>